<template>
  <div class="page-header">
    <van-config-provider :theme-vars="themeVars">
      <van-nav-bar
        v-if="!configPageHeader.isUserDefined"
        :title="configPageHeader.title"
        :left-text="configPageHeader.leftText ? configPageHeader.leftText : ''"
        :right-text="configPageHeader.rightText ? configPageHeader.rightText : ''"
        left-arrow
        @click-left="pageBack"
        @click-right="pageRightClick"
      />
      <van-nav-bar
        v-else
        :title="configPageHeader.title ? configPageHeader.title : ''"
        :left-text="configPageHeader.leftText ? configPageHeader.leftText : ''"
        left-arrow
        @click-left="pageBack"
      >
        <template #right>
          <slot></slot>
        </template>
      </van-nav-bar>
    </van-config-provider>
  </div>
</template>
<script lang="ts">
interface IPageHeader {
  title?: string
  leftText?: string
  rightText?: string
  isUserDefined?: boolean
}
import { defineComponent, computed, PropType } from 'vue'
export default defineComponent({
  name: 'pageHeader',
  props: {
    configPageHeader: {
      type: Object as PropType<IPageHeader>,
      required: true,
    },
  },
  emits: ['pageBack', 'pageRightClick'],
  setup(props, context) {
    const themeVars = {
      navBarTextColor: '#666',
      navBarIconColor: '#666',
    }
    const configPageHeader = computed(() => props.configPageHeader)
    const pageRightClick = () => context.emit('pageRightClick')
    const pageBack = () => context.emit('pageBack')
    return {
      configPageHeader,
      themeVars,
      pageBack,
      pageRightClick,
    }
  },
})
</script>
<style lang="scss">
.page-header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
	z-index:999;
  .van-nav-bar__left {
    padding: 0;
    width:13%;
    justify-content: center;
  }
  .van-search {
    width:calc(89vw);
		padding-left: 0;
  }
  .van-nav-bar__right {
    right: 0;
    left: 45px;
    padding: 0;
    width: 100%;
  }
}
</style>
